<template>
	<div class="text-#000000 pl-30px pr-30px pb-30px">
		<!-- 单价 -->
		<p class="text-14px mb-10px">
			<span class="text-#86909C">单价</span>
			<span class="text-bold">12.00CNY(30秒)</span>
		</p>
		<!-- 您将支付 -->
		<div class="border border-solid border-1px border-#E5E6EB rounded-10px p-10px">
			<p class="text-16px mb-10px">您将支付</p>
			<div class="flex items-center justify-between">
				<el-input placeholder="输入" v-model="payAccount" >
				</el-input>
				<div class="flex items-center">
					<img src="/transaction/c2c/quick/CNY.svg" alt="" class="w-20px h-20px rounded-50% pr-10px" />
					<span class="text-bold">CNY</span>
				</div>
			</div>
			<div class="mt-10px text-#F34E5F text-14px">
				限额：￥100 - ￥200,000
			</div>
		</div>
		<!-- 您收到 -->
		<div class="border border-solid border-1px border-#E5E6EB rounded-10px p-10px mt-20px">
			<p>您收到</p>
			<div class="flex items-center justify-between mt-10px">
				<p>1111111</p>
				<div class="flex items-center justify-center">
					<img src="/home/eth.svg" alt="" class="w-20px h-20px rounded-50% pr-10px" />
					<span class="text-bold">ETH</span>
				</div>
			</div>
		</div>
		<!-- 支付方式 -->
		<div class="mt-20px w-100% mb-100px">
			<el-select v-model="selectedPay.name" placeholder="选择支付方式" placement="bottom-start" @change="changePay"
				:suffix-icon="CaretBottom" size="large" popper-class="c2c-select-optional-popper-pay-dialog"
				style="width: 100%">
				<template #label="{label,value}">
					<div class="flex items-center">
						<p class="w-4px h-14px mr-10px" :style="{backgroundColor:selectedPay.color}"></p>
						<p>{{ label }}</p>
					</div>
				</template>
				<el-option v-for="item in payList" :key="item.id" :label="item.name" :value="item.name">
					<div>
						<div class="flex items-center">
							<p :style="{ backgroundColor: item.color }" class="w-4px h-14px mr-10px"></p>
							<p class="mr-10px">{{ item.name }}</p>
						</div>

						<el-icon v-if="selectedPay.id === item.id"><Select /></el-icon>
					</div>
				</el-option>

			</el-select>
		</div>
		<!-- 按钮 -->
		<div>
			<el-button type="primary" class="w-100% mt-20px " style="color:#86909C;padding:20px 0" color="#ECECF0"
			v-if="payAccount == ''">
				购买ETH
			</el-button>
			<el-button type="primary" class="w-100% mt-20px " style="color:#FFFFFF;padding:20px 0" color="#114CEE"
			v-else @click="toOrderDetail">
				购买ETH
			</el-button>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { CaretBottom } from '@element-plus/icons-vue';
import useJump from '@/utils/jump';

const {jumpTo} = useJump()


// 跳转到订单详情页
const toOrderDetail = () => {
	jumpTo('/transaction/c2c/optionalDetail',{
		id:'ek1239128378123'
	})
}


const payList = ref<any[]>([
	{
		id: '1',
		color: "#1187EE",
		name: "支付宝",
	},
	{
		id: '2',
		color: "#11EE45",
		name: "微信",
	},
	{
		id: '3',
		color: "#FC9559",
		name: "银行借记卡",
	}
])
const selectedPay = ref<any>(
	{
		id: '1',
		color: "#1187EE",
		name: "支付宝"
	}
)
// 支付方式切换
function changePay(name: any) {
	payList.value.forEach((item: any) => {
		if (item.name === name) {
			selectedPay.value.id = item.id;
			selectedPay.value.name = item.name;
			selectedPay.value.color = item.color;
		}
	});
}

// 支付金额
const payAccount=ref<string>('')
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
	color: #000000;
	font-size: 20px;
}

::v-deep .el-input,
::v-deep .el-input__wrapper {
	border: none;
	box-shadow: none;
	/* 如果有阴影，也可以关闭 */
	padding: 0 1px;
}
</style>
